<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
	<title>FORM表单</title>
	<link rel="stylesheet" href="css/bootstrap.font.min.css"/>
	<link rel="stylesheet" href="css/style.css"/>
	<!-- 时间选择器 -->
	<link href="lib/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top to-nav">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
			        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand to-brand" href="#"><i class="fa fa-weixin fa-fw"></i>&nbsp;&nbsp;昂沁科技 后台管理系统</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
					   aria-expanded="false">
						<i class="fa fa-gear"></i>&nbsp;Mr Toma&nbsp;<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">个人信息</a></li>
						<li><a href="#">修改密码</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">退出系统</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- navbar-collapse -->
	</div>
</nav>

<!-- 左侧菜单 start -->
<section class="sidebar_left">
	<div class="sidebar_content">
		<ul class="nav">
			<li class="active"><a href="form.html" class="nav-link"><i class="fa fa-picture-o"></i>基本FORM表单</a></li>
			<li>
				<a href="#" class="nav-link"><i class="fa fa-group"></i>用户管理</a>
				<ul class="link-lop">
					<li><a href="javascript:;">二级菜单</a></li>
					<li><a href="javascript:;">还有</a></li>
				</ul>
			</li>
			<li><a href="#" class="nav-link"><i class="fa fa-flag-checkered"></i>影赛管理</a></li>
			<li><a href="#" class="nav-link"><i class="fa fa-diamond"></i>活动管理</a></li>
			<li><a href="#" class="nav-link"><i class="fa fa-newspaper-o"></i>新闻动态</a></li>
			<li><a href="#" class="nav-link"><i class="fa fa-wrench"></i>网站设置</a></li>
		</ul>
	</div>
</section>
<!-- 左侧菜单 end -->

<section class="content">
	<div class="con-wap">
		<!-- view start -->


		<div class="panel panel-default">
			<div class="panel-heading">
				<h2 class="to-h2">修改信息
					<small>Modify information</small>
				</h2>
			</div>
			<div class="panel-body">

				<button type="button" class="btn btn-default">（默认样式）Default</button>
				<button type="button" class="btn btn-primary">（首选项）Primary</button>
				<button type="button" class="btn btn-success">（成功）Success</button>
				<button type="button" class="btn btn-info">（一般信息）Info</button>
				<button type="button" class="btn btn-warning">（警告）Warning</button>
				<button type="button" class="btn btn-danger">（危险）Danger</button>
				<button type="button" class="btn btn-link">（链接）Link</button>

				<div class="col-sm-6 to-form">
					<form>
						<div class="input-group">
							<span class="input-group-addon">手机号码</span>
							<input type="text" class="form-control" value="13691174781" name="" readonly/>
						</div>

						<div class="input-group">
							<span class="input-group-addon">用户姓名</span>
							<input type="text" class="form-control" placeholder="姓名" name=""/>
						</div>

						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-fw fa-upload"></i></span>
							<input type="file" class="form-control" placeholder="图片上传" name="" accept="image/*" multiple id="file"/>
						</div>
							<a href="#" class="thumbnail">
								<img src=" " alt="压缩过后的图片" id="fileimg">
							</a>

						<div class="input-group date form_datetime">
							<input size="16" type="text" class="form-control" placeholder="时间" readonly>
							<span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
						</div>

						<div class="input-group">
							<input type="text" class="form-control" placeholder="复制" value="cicime 点击复制" readonly id="foo">
							<span class="input-group-addon copy-btn" data-clipboard-action="copy" data-clipboard-target="#foo"><i
									class="fa fa-clone fa-fw"></i></span>
						</div>

						<div class="input-group">
							<span class="input-group-addon">审核状态</span>
							<select class="form-control" name="" id="">
								<option value="">请选择</option>
							</select>
						</div>

						<div class="input-group">
							<span class="input-group-addon">个性签名</span>
							<textarea class="form-control" rows="3" placeholder="说点啥"></textarea>
						</div>

					</form>
				</div>
			</div>
			<div class="panel-footer">
				<button type="submit" class="btn btn-info btn-save">保存</button>
			</div>
		</div>


		<!-- view end -->
	</div>
</section>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="lib/layer/layer.js"></script>

<script src="lib/clipboard.min.js"></script>
<script src="lib/lrz/lrz.bundle.js"></script>
<script src="lib/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="lib/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script>
	/**
	 * 时间选择插件
	 */
	$('.form_datetime').datetimepicker({
		language: 'zh-CN',
		weekStart: 1,
		todayBtn: 1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
		showMeridian: 1,
		minView: 2,
		format: "yyyy-mm-dd"
	});

	/**
	 * 拷贝插件
	 * @type {Clipboard|*}
	 */
	var clipboard = new Clipboard('.copy-btn');
	clipboard.on('success', function (e) {
		layer.tips('复制成功', '#foo', {tips: [3, '#3595CC']});
	});
	clipboard.on('error', function (e) {
		console.log(e);
	});

	/**
	 * 上传压缩-显示-图片
	 * lrz(file, [options]);
	 * width {Number} 图片最大不超过的宽度
	 * height {Number} 同上
	 * quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
	 * fieldName {String} 后端接收的字段名，默认：file
	 * @GitHub localResizeIMG
	 */
	$('#file').on('change', function () {
		lrz(this.files[0])
				.then(function (rst) {
					// 处理成功会执行
					var img = new Image();
					img.src = rst.base64;
					img.onload = function () {
						$('#fileimg').attr('src',rst.base64);
					};
					console.log(rst);
				})
				.catch(function (err) {
					// 处理失败会执行
				})
				.always(function () {
					// 不管是成功失败，都会执行
				});
	});

</script>

</body>
</html>